<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="nav-bar">
			<view style="position: relative;">
				<view class="title">立即预约</view>
				<image src="/static/wwc/left.png" mode=""
					style="width: 60rpx; height: 75rpx; position: absolute; left: 15rpx; top: 20rpx;"></image>
			</view>


			<!-- 维修方式 -->
			<view class="section">
				<view class="repair-row">
					<text class="section-title">维修方式</text>
					<radio-group class="repair-type">
						<label class="radio-label">
							<radio value="到店维修" :checked="repairType==='到店维修'" @click="change1"
								color="#1677FF" />
							<text :class="{'active-radio': repairType==='到店维修'}">到店维修</text>
						</label>
						<label class="radio-label">
							<radio value="上门取车" :checked="repairType==='上门取车'" @click="change2"
								color="#1677FF" />
							<text :class="{'active-radio': repairType==='上门取车'}">上门取车</text>
						</label>
					</radio-group>
				</view>
			</view>


			<!-- 客户信息 -->
			<view class="section">
				<view style="margin-bottom: 40rpx; padding-bottom: 20rpx; border-bottom: 0.5px solid gainsboro;"
					class="section-title">客户信息</view>
				<view class="form-row">
					<view class="form-label">车主姓名</view>
					<input class="form-input" placeholder="请输入车主姓名" v-model="ownerName" />
				</view>
				<view class="form-row">
					<view class="form-label">联系方式</view>
					<input class="form-input" placeholder="请输入联系方式" v-model="contact" />
				</view>
				<view class="form-row">
					<view class="form-label">预约时间</view>
					<input class="form-input" placeholder="请输入预约时间" v-model="appointmentTime" />
				</view>
				<view class="form-row" v-if="repairType =='上门取车'">
					<view class="form-label">取车位置</view>
					<input class="form-input" placeholder="请输入取车位置" v-model="appointmentTime" />
				</view>
			</view>

			<!-- 车辆信息 -->
			<view class="section">
				<view style="margin-bottom: 40rpx; padding-bottom: 20rpx; border-bottom: 0.5px solid gainsboro;"
					class="section-title">车辆信息</view>
				<view class="form-row">
					<view class="form-label">车辆类型</view>
					<picker :range="carTypes" @change="onCarTypeChange">
						<view class="form-input">{{ carType || '请选择' }}</view>
					</picker>
				</view>
				<view class="form-row">
					<view class="form-label">车牌号</view>
					<input class="form-input" placeholder="请输入车牌号" v-model="carNumber" />
				</view>
			</view>

			<!-- 照片上传 -->
			<view class="section">
				<view style="margin-bottom: 40rpx; padding-bottom: 20rpx; border-bottom: 0.5px solid gainsboro;"
					class="section-title">照片</view>
				<view class="photo-row">
					<text class="photo-label">整车照片：</text>
					<view class="photo-upload" @tap="chooseImage('car')">
						<image v-if="carPhoto" :src="carPhoto" class="photo-img" />
						<view v-else class="photo-placeholder">+</view>
					</view>
				</view>
				<view class="photo-row">
					<text class="photo-label">维修部位照片：</text>
					<view class="photo-upload" @tap="chooseImage('part')">
						<image v-if="partPhoto" :src="partPhoto" class="photo-img" />
						<view v-else class="photo-placeholder">+</view>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" @tap="submit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const repairType = ref('到店维修')
	const ownerName = ref('')
	const contact = ref('')
	const appointmentTime = ref('')
	const carTypes = ['轿车', 'SUV', 'MPV', '跑车', '其他']
	const carType = ref('')
	const carNumber = ref('')
	const carPhoto = ref('')
	const partPhoto = ref('')
	
	const change1 = ()=>{
		repairType.value = '到店维修';
		console.log(repairType.value)
	}
	const change2 = ()=>{
		repairType.value = '上门取车';
		console.log(repairType.value)
	}

	function onCarTypeChange(e) {
		carType.value = carTypes[e.detail.value]
		console.log(e)
	}

	function chooseImage(type) {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				if (type === 'car') {
					carPhoto.value = res.tempFilePaths[0]
					console.log(carPhoto.value)
					console.log(res)
				} else {
					partPhoto.value = res.tempFilePaths[0]
				}
			}
		})
	}

	function submit() {
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
	}
</script>

<style scoped>
	.container {
		background: #fafafa;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.nav-bar {
		height: 400rpx;
		background: linear-gradient(180deg, #258aff 0%, #1677ff 100%);
	}

	.title {
		color: #fff;
		font-size: 40rpx;
		text-align: center;
		/* font-weight: bold; */
		padding: 20rpx 0;
	}

	.section {
		background: #fff;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		box-shadow: 0 2rpx 8rpx #e6e6e6;
	}

	.repair-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.section-title {
		font-size: 36rpx;
		/* font-weight: bold; */
		margin-bottom: 0;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.repair-type {
		display: flex;
		gap: 40rpx;
		margin-top: 0;
	}

	.radio-label {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.active-radio {
		color: #1677FF;
	}

	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		margin-top: 32rpx;
	}

	.form-row:last-child {
		margin-bottom: 0;
	}

	.form-label {
		width: 160rpx;
		background: #3a97ff;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		padding: 18rpx 0;
		font-size: 28rpx;
		margin-right: 18rpx;
		font-weight: 500;
		box-shadow: 0 2rpx 8rpx #e6e6e6;
	}

	.form-input {
		flex: 1;
		background: #fff;
		border-radius: 40rpx;
		padding: 16rpx 24rpx;
		font-size: 28rpx;
		border: 2rpx solid #e6e6e6;
		color: #bbb;
	}

	.photo-row {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.photo-label {
		width: 180rpx;
		font-size: 30rpx;
		color: #333;
	}

	.photo-upload {
		width: 160rpx;
		height: 160rpx;
		background: #ffffff;
		border: 2rpx dashed #ccc;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 16rpx;
		position: relative;
	}

	.photo-placeholder {
		font-size: 80rpx;
		color: #bbb;
	}

	.photo-img {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.submit-btn {
		width: 80%;
		margin: 60rpx auto 0 auto;
		background: #1677ff;
		color: #fff;
		font-size: 36rpx;
		border-radius: 60rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-weight: bold;
	}
</style>